<div class="settings-group">
    <div class="group-header">
        <span class="group-header--text">主题色</span>
    </div>
    <div class="group-items">
        <ul class="rapid-settings--theme-color-list" *ngIf="themeSettings">
            <li
                *ngFor="let themeColorItem of themeSettings['themeColor']"
                [ngClass]="{ 'f-state-selected': themeColor == themeColorItem.type }"
                (click)="changeThemeColor(themeColorItem.type)"
            >
                <span [class]="'color-item color-' + themeColorItem.color" title="themeColorItem.name"></span>
                <span class="f-icon f-icon-check"></span>
            </li>
        </ul>
    </div>
</div>
<div class="settings-group">
    <div class="group-header">
        <span class="group-header--text">密度</span>
    </div>
    <div class="group-items">
        <ul class="rapid-settings--theme-density-list" *ngIf="themeSettings">
            <li *ngFor="let themeSizeItem of themeSettings['themeSize']">
                <div
                    [class]="'density-item density-' + themeSizeItem.size"
                    [ngClass]="{ 'f-state-selected': themeSize == themeSizeItem.type }"
                    (click)="changeThemeSize(themeSizeItem.type)"
                >
                    <span class="desity-imgcontainer"></span>
                    <span class="desity-icon-wrapper">
                        <i class="f-icon f-icon-check"></i>
                    </span>
                </div>
                <span class="density-text">{{ themeSizeItem.name }}</span>
            </li>
        </ul>
    </div>
</div>
<ng-container *ngFor="let groupInfos of editorsData; index as groupInfosIndex">
    <ng-container *ngFor="let group of groupInfos.groups; index as groupIndex">
        <div class="settings-group" *ngIf="group.items.length > 0">
            <div class="group-header" (click)="foldOrExpandGroup(groupInfosIndex, groupIndex)">
                <span class="group-header--text">{{ group.name }}</span>
                <!-- <span class="group-header--icon" [ngClass]="{'f-state-expand':!group.isFold}" *ngIf="group.items.length>3"><i
            class="f-icon f-icon-dropdown"></i></span> -->
            </div>
            <!--暂时去掉収折功能-->
            <!-- <ng-container *ngIf="group.isFold">
        <div class="group-items" *ngFor="let editorItem of group.items.slice(0,3)">
          <app-editor [item]="editorItem" [variableType]="'rapidSettings'"></app-editor>
        </div>
      </ng-container>
      <ng-container *ngIf="!group.isFold"> -->
            <div class="group-items" *ngFor="let editorItem of group.items">
                <app-editor [item]="editorItem" [variableType]="'rapidSettings'"></app-editor>
            </div>
            <!-- </ng-container> -->
        </div>
    </ng-container>
</ng-container>
<!-- <farrisui-color-picker class="w-100" [(ngModel)]="value"></farrisui-color-picker>  -->
